<template>
    <div class="page-hero">
        <div class="top-bar bg-black py-2 px-3 d-flex ai-center text-white">
            <img src="../assets/img/logo.png" height="30">
            <div class="pl-3 flex-1">
                <span class="text-white">王者荣耀</span>
                <span class="text-white ml-2">攻略站</span>
            </div>
            <router-link to="/" tag="div">更多英雄 &gt;</router-link>
        </div>
        <div class="top" :style="{'background-image': `url(${model.banner})`}">
            <div class="info text-white p-3 d-flex flex-column h-100 jc-end">
                <div class="fs-sm">{{model.title}}</div>
                <h3 class="py-2 my-2">{{model.name}}</h3>
                <div class="fs-sm">{{model.categories !== undefined ? model.categories.map(v => v.name).join('/') : ''}}</div>
                <div class="d-flex jc-between pt-2">
                    <div class="scores d-flex ai-center" v-if="model.scores">
                        <span>难度</span>
                        <span class="badge bg-primary">{{model.scores.difficult}}</span>
                        <span>技能</span>
                        <span class="badge bg-blue-1">{{model.scores.skills}}</span>
                        <span>攻击</span>
                        <span class="badge bg-danger">{{model.scores.attack}}</span>
                        <span>生存</span>
                        <span class="badge bg-dark">{{model.scores.survive}}</span>
                    </div>
                    <router-link tag="span" class="text-grey fs-sm" to="/">
                        皮肤:2 &gt;
                    </router-link>
                </div>
            </div>
        </div>
<!--    end of top!    -->
        <div>
            <div class="px-3 bg-white">
                <div class="nav d-flex pt-3 pb-2 jc-around border-bottom">
                    <div class="nav-item active">
                        <div class="nav-link">英雄初识</div>
                    </div>
                    <div class="nav-item">
                        <div class="nav-link">进阶攻略</div>
                    </div>
                </div>
            </div>
            <swiper>
                <swiper-slide>
                    <div>
                        <div class="p-3 bg-white border-bottom">
                            <div class="d-flex">
                                <router-link tag="button" to="/" class="btn btn-lg flex-1">
                                    <i class="iconfont icon-cc-menu-circle"></i>
                                    <span>英雄介绍视频</span>
                                </router-link>
                                <router-link tag="button" to="/" class="btn btn-lg flex-1 ml-2">
                                    <i class="iconfont icon-cc-menu-circle"></i>
                                    <span>一图识英雄</span>
                                </router-link>
                            </div>
                            <!--  技能  -->
                            <div class="skills">
                                <div class="d-flex jc-around mt-4">
                                    <img :src="item.icon"
                                         @click="currentIndex = i"
                                         v-for="(item, i) in model.skills"
                                         :key="item._id"
                                         :class="['icon', currentIndex === i && 'active']"
                                    >
                                </div>
                                <div v-if="currentSkill">
                                    <div class="d-flex pt-4 pb-3">
                                        <h3 class="m-0">{{currentSkill.name}}</h3>
                                        <span class="text-grey-1 ml-4">
                                            (冷却值:{{currentSkill.delay}} 消耗:{{currentSkill.cost}})
                                        </span>
                                    </div>
                                    <p>{{currentSkill.desc}}</p>
                                </div>
                            </div>
                        </div>
                        <list-card plain icon="cc-menu-circle" title="出装推荐" class="heros-items">
                            <div class="fs-xl">顺风出装</div>
                            <div class="d-flex jc-around text-center fs-xs mt-3">
                                <div v-for="item in model.items1" :key="item.name">
                                    <img :src="item.icon" class="icon">
                                    <div>{{item.name}}</div>
                                </div>
                            </div>
                            <div class="border-bottom mt-3"></div>
                            <div class="fs-xl mt-3">逆风出装</div>
                            <div class="d-flex jc-around text-center fs-xs mt-3">
                                <div v-for="item in model.items2" :key="item.name">
                                    <img :src="item.icon" class="icon">
                                    <div>{{item.name}}</div>
                                </div>
                            </div>
                        </list-card>
                        <list-card plain icon="cc-menu-circle" title="使用技巧">
                            <p class="m-0 fs-sm">{{model.usageTips}}</p>
                        </list-card>
                        <list-card plain icon="cc-menu-circle" title="对抗技巧">
                            <p class="m-0 fs-sm">{{model.battleTips}}</p>
                        </list-card>
                        <list-card plain icon="cc-menu-circle" title="团战思路">
                            <p class="m-0 fs-sm">{{model.teamTips}}</p>
                        </list-card>
                        <list-card plain icon="cc-menu-circle" title="英雄关系">
                            <div class="fs-xl">最佳搭档</div>
                            <div v-for="item in model.partners" class="d-flex pt-3" :key="item.name">
                                <img :src="item.hero.icon" height="50">
                                <p class="flex-1 ml-3 m-0">{{item.desc}}</p>
                            </div>
                            <div class="border-bottom mt-3"></div>
                        </list-card>
                    </div>
                </swiper-slide>
                <swiper-slide></swiper-slide>
            </swiper>
        </div>
    </div>
</template>

<script>
    import ListCard from '../components/ListCard'
    export default {
        name: "Hero",
        components: {
          'list-card': ListCard
        },
        props: {
            id: { required: true }
        },
        data() {
            return {
                model: {},
                currentIndex: 0
            }
        },
        created() {
            this.fetch();
        },
        methods: {
            async fetch() {
                const res = await this.$http.get(`heroes/${this.id}`);
                this.model = res.data;
            }
        },
        computed: {
            currentSkill() {
                return this.model.skills && this.model.skills[this.currentIndex];
            }
        }
    }
</script>

<style lang="scss">
    @import "../assets/scss/var";
    .page-hero {
        .top {
            height: 50vw;
            background: #fff no-repeat top center;
            background-size: auto 100%;
        }
        .info {
            background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
            .scores {
                .badge {
                    margin: 0 0.25rem;
                    display: inline-block;
                    width: 1rem;
                    height: 1rem;
                    line-height: 1rem;
                    text-align: center;
                    border-radius: 50%;
                    font-size: 0.6rem;
                    border: 1px solid rgba(255,255,255,0.2);
                }
            }
        }
        .skills {
            img.icon {
                border: 3px solid map_get($colors, 'white');
                width: 65px;
                height: 65px;
                &.active{
                    border-color: map_get($colors, 'primary');
                }
                border-radius: 45%;
            }
        }
        .heros-items {
            img.icon {
                width: 46.5px;
                height: 46.5px;
                border-radius: 50%;
            }
        }
    }
</style>
